/* ====================
来源：guangtou.me
作者：光头obsidian教程
功能：将标注块并列显示。
原作者：https://github.com/efemkay
原地址：https://github.com/efemkay/obsidian-modular-css-layout
==================== */

/* ■■■■■ 演示 ■■■■■ 

> [!multi-column]
>
> > [!BUG] 放弃
> > 正文
>
> > [!note] 重启
> > 正文

 ■■■■■ 完毕 ■■■■■ */



body{
	/* 用于列表列、网格和卡片 */
	--list-min-width: 200px;
	--col-rule-color: var(--background-modifier-border); /* #b3b3b3; */
	--col-rule-width: 1px;
	--list-grid-min-width: 250px;
	--list-grid-wide-min-width: 350px;

}
.theme-dark {
/*	--background-mcl-card: hsl(300, 5%, 15%); */
}
.theme-light {
/*	--background-mcl-card: hsl(300, 5%, 90%); */
}


/* === 通用 === */

	/* -- 固定宽度定义 -- */
	/* 对最后一个 .callout 使用四倍选择器以在主多列标注块中获得更高的优先级 */
	div[data-callout-metadata*="fw"].callout.callout.callout { flex-grow: 0; flex-shrink: 0;}
	div[data-callout-metadata*="fw1"].callout.callout.callout.callout { flex-basis: 100px; width: 100px; }
	div[data-callout-metadata*="fw2"].callout.callout.callout.callout { flex-basis: 200px; width: 200px; }
	div[data-callout-metadata*="fw3"].callout.callout.callout.callout { flex-basis: 300px; width: 300px; }
	div[data-callout-metadata*="fw4"].callout.callout.callout.callout { flex-basis: 400px; width: 400px; }
	div[data-callout-metadata*="fw5"].callout.callout.callout.callout { flex-basis: 500px; width: 500px; }
	div[data-callout-metadata*="fw6"].callout.callout.callout.callout { flex-basis: 600px; width: 600px; }
	div[data-callout-metadata*="fw7"].callout.callout.callout.callout { flex-basis: 700px; width: 700px; }
	div[data-callout-metadata*="fw8"].callout.callout.callout.callout { flex-basis: 800px; width: 800px; }
	div[data-callout-metadata*="fw9"].callout.callout.callout.callout { flex-basis: 900px; width: 900px; }

	div[data-callout-metadata*="pw1"].callout.callout.callout.callout { flex-basis: 10%; width: 10%; }
	div[data-callout-metadata*="pw2"].callout.callout.callout.callout { flex-basis: 18%; width: 18%; }
	div[data-callout-metadata*="pw3"].callout.callout.callout.callout { flex-basis: 28%; width: 28%; }
	div[data-callout-metadata*="pw4"].callout.callout.callout.callout { flex-basis: 38%; width: 38%; }
	div[data-callout-metadata*="pw5"].callout.callout.callout.callout { flex-basis: 48%; width: 48%; }
	div[data-callout-metadata*="pw6"].callout.callout.callout.callout { flex-basis: 58%; width: 58%; }
	div[data-callout-metadata*="pw7"].callout.callout.callout.callout { flex-basis: 68%; width: 68%; }
	div[data-callout-metadata*="pw8"].callout.callout.callout.callout { flex-basis: 78%; width: 78%; }
	div[data-callout-metadata*="pw9"].callout.callout.callout.callout { flex-basis: 88%; width: 88%; }


	/* metadata "wide-x" 用于控制子标注块的灵活最大宽度，仅支持 2,4,8,16 等离散值 */
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="mw0"].callout.callout { flex-basis: 0; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw1"].callout { flex: 1 0 auto; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw2"].callout { flex: 2 0 auto; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw3"].callout { flex: 3 0 auto; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw4"].callout { flex: 4 0 auto; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw5"].callout { flex: 5 0 auto; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw6"].callout { flex: 6 0 auto; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw7"].callout { flex: 7 0 auto; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw8"].callout { flex: 8 0 auto; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw9"].callout { flex: 9 0 auto; }




/* === 多列标注块（MCC）=== */
	/*	一些问题仍然存在
		(2) 某些主题使用透明度影响 .callout-title */

	/* 通用 MCC 变量 */
	body {
		--mcc-img-snw-display: none;
		--callout-min-width: 200px;
		--callout-nowrap-min-width: 250px;
		--callout-gap: 1em;
		--callout-margin: 0px;
	}
	[data-callout="multi-column"].callout {
		--callout-blend-mode: normal;
	}

	/* -- 主 MCC 代码 -- */

		/* 移除标注块标题并使标注块内容成为主标注块的一部分以进行框格式设置 */
		div[data-callout="multi-column"].callout > .callout-title { display: none; }
		div[data-callout="multi-column"].callout > .callout-content { display: contents; }
		/* 使主标注块成为 flex 容器并移除框格式设置 */
		/* --columns: unset 用于撤销 Sanctum 的修改 */
		div[data-callout="multi-column"].callout
			{ display: flex; flex-wrap: wrap; gap: var(--callout-gap); background: unset; border: unset; margin: unset; padding: unset; clear: both; --columns: unset; }
		/* 使子标注块在 flex 列中显示，以允许垂直增长 */
		div[data-callout="multi-column"].callout .callout:not([data-callout="multi-column"]) { display: flex; flex-direction: column; }
		div[data-callout="multi-column"].callout:not(.is-collapsed) .callout { margin-inline: var(--callout-margin); margin-block: var(--callout-margin); } /* 为阴影留出空间 */
		div[data-callout="multi-column"].callout .callout .callout-content { flex-grow: 1}

		div[data-callout="multi-column"].callout > .callout-content > *:is(div,ul,blockquote,p) { flex: 1 1 var(--callout-min-width); margin: 0;}

		/* metadata "wide-x" 用于控制子标注块的灵活最大宽度，仅支持 2,4,8,16 等离散值 */
		div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="min-0"] { flex-basis: 0; }
		div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-2"] { flex-grow: 2; }
		div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-3"] { flex-grow: 3; }
		div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-4"] { flex-grow: 4; }
		div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-5"] { flex-grow: 5; }

		@media (min-width: 500px) {
			/* .is-collapsed 用于仅在折叠时绘制左侧边框 */
			div[data-callout="multi-column"].callout > div.callout-content .callout.is-collapsed { box-shadow: unset; height: min-content;}
		}

	/* -- MCC 变体 - 子标注块/子项的灵活高度 -- */
		/* 如果希望有非标注块子项（如表）并且不希望填充高度，这也很有用 */
		div[data-callout="multi-column"].callout {}
		div[data-callout="multi-column"][data-callout-metadata*="flex-h"].callout { align-items: flex-start; }

	/* -- MCC 变体 - 固定列数 -- */
		div[data-callout="multi-column"][data-callout-metadata*="col3"]:not([data-callout-metadata*="icons"]).callout {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		}

	/* -- MCC 变体 - 图标 -- */

		/* 主代码 */
		div[data-callout="multi-column"][data-callout-metadata*="icons"] {

			&.callout { justify-content: center; }
			&.callout .callout { display: flex; flex-direction: row; flex-wrap: wrap; }
			&.callout.callout .callout-content > p { flex-grow: 1; text-align: center; }
			/* 列数选项 */
			&[data-callout-metadata*="col2"].callout.callout .callout-content > p { flex-basis: 40%; }
			&[data-callout-metadata*="col3"].callout.callout .callout-content > p { flex-basis: 30%; }
			&[data-callout-metadata*="col4"].callout.callout .callout-content > p { flex-basis: 22%; }
			&[data-callout-metadata*="col5"].callout.callout .callout-content > p { flex-basis: 18%; }

			/* listive 主题 */
			&.callout p:first-child { margin-top: revert; }
		}


	/* -- MCC 变体 - 固定宽度选项 -- */
		/* 固定宽度选项（使用 callout-metadata） */
		div[data-callout="multi-column"][data-callout-metadata*="center-fixed"].callout { justify-content: center; }
		div[data-callout="multi-column"][data-callout-metadata*="left-fixed"].callout { justify-content: flex-start; }
		div[data-callout="multi-column"][data-callout-metadata*="right-fixed"].callout { justify-content: flex-end; }
		div[data-callout="multi-column"][data-callout-metadata*="fixed"].callout > .callout-content > *:is(div,ul) { flex-grow: 0; }

		/* 固定宽度选项的标注块大小 */
		div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="small"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-small-width) * 0.5 ); }
		div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="medium"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-medium-width) * 0.65); }
		div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="large"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-large-width) * 0.8); }


	/* -- MCC 变体 - 不换行选项 -- */

		/* 不换行选项（使用 callout-metadata）- 用于单行带有水平滚动条 */
		div[data-callout="multi-column"][data-callout-metadata*="no-wrap"].callout {
			flex-wrap: nowrap; overflow-x: scroll;
			& > .callout-content > *:is(div,ul) { flex-shrink: 0; }
		}

		/* 不换行选项，宽度选项。旧版宽度选项，最好使用顶部的 dw、pw 和 fw 选项 */
		.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="small"] { flex-basis: 300px; }
		.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="medium"] { flex-basis: 400px; }
		.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="large"] { flex-basis: 600px; }

		/* 使标注块中的项目居中对齐 */
		div[data-callout="multi-column"] .callout[data-callout-metadata*="center"] { text-align: center; }


	/* -- 社区主题的特殊调整 -- */

		 /* 特殊调整 -- 对于带有负边距和阴影的主题（例如 Prism） */
		div[data-callout="multi-column"].callout > .callout-content { margin-top: unset;}
		div[data-callout="multi-column"].callout:not(.is-collapsed) { box-shadow: unset;}

		/* Blue Topaz - 从主 [!multi-column] 中移除阴影 */
		body[class*="notebook-liked-markdown-page"].shade-callout-style .callout[data-callout="multi-column"] { box-shadow: unset !important; }

		/* 特殊调整 -- 最小左侧边距 *//*
		.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout="multi-column"].callout
			{ width: 100%; max-width: 100%; margin-inline: 0 !important; }

		/* Minimal - .dataview.list-view-ul 宽度 - Minimal 使用 --line-width-adaptive 设置宽度（默认为 40rem） */
		body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) div[data-callout="multi-column"].callout .dataview.list-view-ul {width: auto;}

		/* Minimal -- 标注块轮廓，确保子标注块不重叠和隐藏 */
		.callouts-outlined div[data-callout="multi-column"].callout:not(.is-collapsed) .callout:not([data-callout="multi-column"]) {
			margin-top: 1em;
		}


	/* -- 插件/Markdown 元素的特殊调整 -- */

		/* SNW 插件 */
		div[data-callout*="multi-column"].callout .callout-content span.image-embed + .snw-reference { display: var(--mcc-img-snw-display); }




/* === 空白容器 "DIV" - 可与上述主多列布局一起使用 === */

	/* "blank-container" - 无背景、无边框、无标题、什么都没有，并移除变亮效果 */
	div[data-callout*="blank"].callout {--callout-blend-mode: normal;}
	div[data-callout*="blank"].callout > .callout-title { display: none; }
	div[data-callout*="blank"].callout > .callout-content {display: contents;}
	div[data-callout*="blank"].callout { border: 0; padding-top: 0; padding-inline: 5px; background: unset; box-shadow: unset; }

	/* -- 无边距 -- */
	/* 问题仍然存在
	   - 标题字体大小不同
	   - "no-margin" 在编辑视图中不完全可用，因为 Minimal 主题的 wide-page 覆盖了它 */
	div[data-callout-metadata*="no-margin"]:is(.cm-callout, .callout.callout, .callout.callout .callout-content) {margin: 0; padding: 0;}

	/* -- 仅对唯一子项无边距 -- */
		div[data-callout*="blank"].callout .callout-content > p:only-child {
			margin-block: 0;
		}


	/* -- 主题的特殊调整 -- */

		/* Mado. 移除主题的伪左边界 */
		div[data-callout*="blank"] .callout-content::before { display: none; }


/* === 文本两端对齐 === */

	.text-justify :is(.markdown-preview-view p,.markdown-source-view .cm-line) { text-align: justify; }


/* === 浮动标注块 - 基础 === */
	/* 浮动使用 callout-metadata 控制布局，可以应用于任何标注块 */

	/* 变量 */
	body {
		--float-small-width: 300px;
		--float-medium-width: 400px;
		--float-large-width: 600px;

		--float-left-callout-margin: 0 15px 0 0;
		--float-right-callout-margin: 0 0 0 15px;
		--float-callout-top-margin: 0em;
		--float-callout-bottom-margin: 0em;
		--float-callout-snw-display: none;
	}
	/* 变量 */
	body {
		--float-left-callout-margin-inline: 0 12px;
		--float-right-callout-margin-inline: 12px 0;
		--float-snw-display: none;
	}


	/* -- 主代码。使用媒体查询，使浮动仅在有足够宽度时工作 */
	@media (min-width: 500px){
		.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) { display: inline; z-index: 30;}
		.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) > div > .callout { float: left; z-index: 30; }
		.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) > .edit-block-button { display: none; }
		.markdown-reading-view div[data-callout-metadata*="left"].callout {float: left;}

		.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) { display: inline; z-index: 30;}
		.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) > div > .callout { float: right; z-index: 30; }
		.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) > .edit-block-button { display: none; }
		.markdown-reading-view div[data-callout-metadata*="right"].callout {float: right; }

		.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) .callout-content > p:last-of-type { margin-bottom: auto;}

		[data-callout-metadata*="float-right"].cm-embed-block.cm-callout {width: auto !important;}

		/* 移除浮动标注块中第一段的边距 */
		.callout:is(div[data-callout-metadata*="left"],div[data-callout-metadata*="right"]) .callout-content > :is(p:first-child,ul:first-child,ol:first-child) {margin-top: 0;}

		/* 可调整间距 */
		/* 2023年3月26日 暂时只支持顶部，之后再处理左右 */
		.markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="left"], div[data-callout-metadata*="right"]) {
			margin-top: calc(1em * var(--line-height-normal) + var(--float-callout-top-margin));
		}

		/**/
		.markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="left"]),
		.markdown-reading-view div[data-callout-metadata*="left"].callout {
			margin-inline: var(--float-left-callout-margin-inline);
		}
		.markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="right"]),
		.markdown-reading-view div[data-callout-metadata*="right"].callout {
			margin-inline: var(--float-right-callout-margin-inline);
		}
	}

	/* -- FC 大小选项 -- */

		/* 旧版宽度选项，最好使用顶部的 dw、pw 和 fw 选项 */
		[data-callout-metadata*="-small"].callout {width: var(--float-small-width);}
		[data-callout-metadata*="-medium"].callout {width: var(--float-medium-width);}
		[data-callout-metadata*="-large"].callout {width: var(--float-large-width);}


	/* -- 插件/Markdown 元素的特殊调整 -- */

		/* 标题选项 */
		div:is([data-callout-metadata*="caption"]).callout > .callout-content > p .image-embed[alt]:not([alt$=".png"], [alt$=".jpg"], [alt$=".jpeg"], [alt$=".tiff"])::after {content: attr(alt); text-align: center; display: block; font-style: italic; color: var(--text-muted); }
		div:is([data-callout-metadata*="caption"]).callout > .callout-content > p img:not(.emoji) { display: block; margin-right: auto; margin-left: auto;}

		/* 引入 clear 以打破浮动 */
			/* .markdown-preview-view h2, *//* 移除这个，因为它有奇怪的间距效果 */
			.embedded-backlinks { clear: both; }

		/* 对于引用与浮动布局重叠的问题 -- 将在 2024 年 6 月 30 日移除，不再需要 */
			/* .markdown-preview-view :is(blockquote) { overflow-x: auto; } /* 修复引用重叠问题 */
			/* .markdown-preview-view :is(p) { overflow: unset; } /* 修复段落不围绕浮动的问题，适用于 Willemstad */

		/* 对于 SNW 插件 */
		div:is([data-callout-metadata*="caption"],[data-callout-metadata*="left"],[data-callout-metadata*="right"]).callout > .callout-content > p .snw-embed-preview { display: var(--float-callout-snw-display); width: min-content; height: min-content; }
		div:is([data-callout-metadata*="caption"],[data-callout-metadata*="left"],[data-callout-metadata*="right"]).callout > .callout-content > p .internal-embed.image-embed ~ br {display: none;}


	/* -- 主题的特殊调整 -- */

		/* Minimal. Minimal 浮动。为 Minimal V7.4.7 更新 */
		/* "重置" 默认的 "cm-sizer" 宽度但尊重 Minimal 设置，并要求 cssclass ".minimal-float"，因为 Minimal 自己的宽表将无法与浮动一起工作，即从 .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)) 中删除 :not(:has(table)) */
		.minimal-float.markdown-source-view.mod-cm6 {
			.cm-sizer {
				max-width: var(--max-width); width: var(--line-width);
			}
			.cm-contentContainer.cm-contentContainer > .cm-content > div,
			.cm-sizer > .embedded-backlinks,
			.cm-sizer > .inline-title,
			.cm-sizer > .metadata-container {
				max-width: none; width: auto;
			}
		}

		/* Minimal. 之前的 Minimal 浮动但有性能问题。保留作为参考直到 2024 年 6 月 30 日 */ /*
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer { max-width: var(--max-width); width: var(--line-width); }

		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer>.cm-content>div,
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.embedded-backlinks,
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.inline-title,
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.metadata-container
			{ max-width: none; width: auto; }


		/* Minimal - 修复以支持 Breadcrumbs 插件。次于上述 LP 浮动修复 */
			body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .BC-trail.markdown-preview-sizer { display: flex; }

		/* Minimal - 由于 !important 的大小选项修复 */
		/* Minimal. 使用 body[class*="minimal-tab-title"] 作为标识符。要覆盖（具有更高特异性）宽度参数。稍后可以合并到主代码中 */
		@media (min-width: 500px){
			body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="small"].callout { width: var(--float-small-width) !important; margin-left: 0 !important; }
			body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="medium"].callout { width: var(--float-medium-width) !important; margin-left: 0 !important; }
		}
		@media (min-width: 750px){
			body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="large"].callout { width: var(--float-large-width); margin-left: 0 !important; }
		}


/* === 列表列 ===*/
	/* 支持 (1) CSS :has()、(2) YAML cssclass、(3) CT 插件和 (4) MA 插件
		- CSS :has() 可以应用于子列表，因此没有列分隔线。CT 插件应用于容纳 ul 的 div，因此列间距不同
		- xx-column-list 仅用于第一级列表，但可以应用于任何地方，但 xx-column-list-block 应用于块级。两者都需要 JV 的 Markdown Attributes 插件
	*/


	/* -- 列表列/网格/卡片通用样式 -- */

		/* 在渲染视图中隐藏标签，在编辑模式中调暗并减小大小 */
		:is(div[class*="mcl"].markdown-rendered, .markdown-rendered) a[href*="#mcl"] {display: none;}
		/* :is(div[class*="mcl"].markdown-rendered, .markdown-rendered div[class*="mcl"]) a[href*="#mcl"] {display: none;} */
		.cm-s-obsidian .HyperMD-list-line span[class*="mcl"] {background-color: var(--background-primary) !important; color: var(--text-faint); font-size: 0.9rem; }


	/* -- 使用 YAML cssclass 和 Markdown Attributes 的列表列，即 {.three-column-list-block} -- */

		/* 定义列间距和列分隔线 */
		.two-column-list div > ul,   .two-column-list-block,
		.three-column-list div > ul,  .three-column-list-block,
		.four-column-list div > ul,  .four-column-list-block,
		.multi-column-list div > ul,  .multi-column-list-block
			{ column-gap: 3rem; column-rule: var(--col-rule-width) solid var(--col-rule-color); }

		/* 定义列数，对于固定列数，受笔记宽度限制（未来可以在安装程序 v1.2.7 广泛使用时使用 @container） */
		@media (min-width: 500px ){
			.two-column-list div > ul,   .two-column-list-block {columns: 2; }
			.three-column-list div > ul,  .three-column-list-block {columns: 3; }
			.four-column-list div > ul,  .four-column-list-block {columns: 4; }
		}
		.multi-column-list div > ul,  .multi-column-list-block { column-width: var(--list-min-width); }

		/* 对带有 -column-list-block 的脚注的特殊调整 -- obsidian 在最后一个 <li> 处创建一个 <br> 标签 */
		.footnotes [class$="-column-list-block"] li:last-of-type br:last-of-type {display: none;}


	/* -- 使用标签的列表列（使用 CSS has）-- */

		/* 在 ul 级别设置列分隔线并调整边距 */
		ul:has(> li > [data-heading] > [href*="#mcl/list-column"]),
		ul:has(> li > [href*="#mcl/list-column"]) {
			margin-top: 0;
            column-width: var(--list-min-width); column-gap: 1rem;
            column-rule: var(--col-rule-width) solid var(--col-rule-color);
        }

		/* 为 div 提供一些边距，仅对第一个 ul */
		div:has(> ul > li > [href*="#mcl/list-column"]),
		div:has(> ul > li > [data-heading] > [href*="#mcl/list-column"])
			{ margin-top: 0.8em; }

		/* 重新调整 [!blank] 的显示内容 */
		div[data-callout*="blank"] > .callout-content:has(li [href*="#mcl/list-column"]) {display: block; margin: 0; padding: 0; }


	/* -- 列表列的通用调整 -- */

		/* 调整错位的项目符号（这是一个 hack，稍后需要找到更好的解决方案） */
		ul:has([href="#mcl/list-column"]) li > .list-bullet::after, /* :has() */
		.markdown-preview-view[class*="column-list"] li > .list-bullet::after, /* yaml cssclass */
		.tag-mcllist-column ul li > .list-bullet::after, /* contextual typography */
		ul[class*="column-list"] li > .list-bullet::after /* markdown attributes */
			{ position: relative; }


	/* -- 列表列插件的特殊调整 -- */

		/* 对于自定义类 */
		div.cc-container:has(li > [href="#mcl/list-column"]) { width: 100%; }



/* === 列表网格（使用标签）=== */
	/* 支持 (1) :has() 和 (2) Contextual Typography 插件 */

	/* -- 主代码 -- */

		ul:has(> li > [data-heading] > [href*="#mcl/list-grid"]),
		ul:has(> li > [href*="#mcl/list-grid"]),
		div[class*="mcllist-grid"] ul:first-child
			{ display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr)); }

		ul:has(> li > [data-heading] > [href*="#mcl/list-grid-wide"]),
		ul:has(> li > [href*="#mcl/list-grid-wide"]),
		div[class*="mcllist-grid-wide"] ul:first-child
			{ grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-wide-min-width),1fr)); }

		ul:has(> li > [data-heading] > [href*="#mcl/list-grid"]) > li:not(:last-of-type),
		ul:has(> li > [href*="#mcl/list-grid"]) > li:not(:last-of-type),
		div[class*="mcllist-grid"] ul:first-child > li:not(:last-of-type)
			{ padding-right: 1.6em; }

		ul:has(> li > [data-heading] > [href*="#mcl/list-grid-sm"]),
		ul:has(> li > [href*="#mcl/list-grid-sm"]),
		div[class*="mcllist-grid-sm"] ul:first-child
			{ --list-grid-min-width: 20%; }


		/* - 仪表板样式，仅页面级别，应用于任何第一级 */
		/* -- 仅在宽度 > 400pt 时适用，否则仅单列 */
		/* 无法在块级进行网格列表，会破坏格式 */
		@media (min-width: 500px) {
			.two-column-grid-list div > ul { display: grid; grid-column-gap:3em; grid-template-columns:repeat(2,1fr);}
		}
		@media (min-width: 600px) {
			.three-column-grid-list div > ul { display: grid; grid-column-gap:3em; grid-template-columns:repeat(3,1fr);}
		}



/* === 列表卡片（使用标签）=== */
	/* 支持 (1) :has() 和 (2) Contextual Typography 插件 */

	body {
		--mcl-card-header-border-width: 1px;
		--mcl-card-bg-color: var(--background-secondary);
		--mcl-card-gap: 0.2em;
		--mcl-card-border-width: 1px;
		--mcl-card-border-color: var(--background-modifier-border);
	}

	/* -- 主代码 -- */

		/* 使列表成为网格，移除一些 ul 内边距 */

		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), [class*="mcllist-card"]) ul:first-child { display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr)); margin-block-start: 0.5em; }
		:is(div:has(> ul [data-heading*="#mcl/list-card-wide"]), [class*="mcllist-card-wide"]) ul:first-child { grid-template-columns: repeat(auto-fit, minmax(var(--list-grid-wide-min-width),1fr));}
		/* 取消缩进第一级项目符号 */
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul ul:not(ul ul ul) { padding-left: 0.1em; } /* 对于 v1.6，这有点多余 */
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul ul:not(ul ul ul) > li { margin-inline-start: 0; }
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul { padding-left: 0; }
		:is(.is-mobile .markdown-preview-section) :is(div:has([data-heading*="#mcl/list-card"]), .tag-mcllist-card) :is(ol:not(ol ol ol),  ul:not(ul ul ul)) {padding-left: 0;}
		/* 重新定位折叠指示器和悬停行为 */
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li {position: relative;}
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li:hover > .collapse-indicator,
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > ul > li:hover > .collapse-indicator {opacity: 1;}
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > .collapse-indicator,
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > ul > li > .collapse-indicator {position: absolute; right: 0.7em; padding-right: 0;}
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul::before {display: none;}
		/* 装饰卡片的第一个标题 */
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li:not(.is-collapsed) > [data-heading] {border-bottom: var(--mcl-card-header-border-width) solid var(--mcl-card-border-color); margin-bottom: 0.2em;}
		/* 隐藏列表卡片的第一级和第二级列表项目符号 */
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > div > div > ul > li > .list-bullet::after,
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > div > div > ul > li > ul > li > .list-bullet::after,
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li::before,
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > ul > li::before,
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > .list-bullet::after,
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > ul > li > .list-bullet::after {visibility: hidden;}
		/* 移除缩进指南 */
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul ul ul)::before {--indentation-guide-width: 0;}
		.markdown-rendered.show-indentation-guide :is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) li > ul::before,
		.markdown-rendered.show-indentation-guide :is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) li > ol::before {border-right: 0; border-left: 0; }
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) li {list-style: none;}
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) li li li {list-style: circle;}
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) .callout ul:not(ul ul) > li,
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul) > li
			{ margin-inline: var(--mcl-card-gap); margin-bottom: calc(var(--mcl-card-gap)*2); padding: 0.3em 0.5em; outline: var(--mcl-card-border-width) solid var(--mcl-card-border-color); border-radius: 0.5em; background-color: var(--mcl-card-bg-color);}
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul) > li img {width: 100%;}
		:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul img {margin: 0; float: none;}


	/* -- 主题的特殊调整 -- */

		/* Sanctum */
		.markdown-rendered .tag-mcllist-card ul img[alt*=right] {margin: 0;}



/* === Style Settings === */

/* @settings

name: 模块化CSS布局 - 多列
id: modular-css-layout-mc
settings:

    -
        id: multi-column-title
        title: 多列标注块设置
        type: heading
        level: 1
		collapsed: true

	-
        id: mc-callout-general-title
        title: 多列标注块 -- 基本设置
        type: heading
        level: 2
		collapsed: false
	-
		id: mcc-img-snw-display
		title: 在多列标注块中隐藏SNW指示器
		type: variable-select
		default: none
		options:
			-
				label: 显示
				value: inline
			-
				label: 隐藏
				value: none

	-
        id: mc-callout-width-title
        title: 多列标注块 -- 宽度设置
        type: heading
        level: 2
		collapsed: false
    -
        id: callout-min-width
        title: 子标注块最小宽度
        description: 用于 [!multi-column] 中的子标注块，单位为像素
        type: variable-number-slider
        default: 200
        min: 100
        max: 500
        step: 50
		format: px
	-
        id: callout-nowrap-min-width
        title: 禁止换行的子标注块最小宽度
        description: 用于 [!multi-column|no-wrap] 中的子标注块，单位为像素
        type: variable-number-slider
        default: 250
        min: 100
        max: 500
        step: 50
		format: px

	-
        id: mc-callout-gap-title
        title: 多列标注块 -- 间距与边距
        type: heading
        level: 2
		collapsed: false
    -
        id: callout-gap
        title: 子标注块间距（任意单位）
        description: 数值和单位之间不要有空格
        type: variable-text
        default: 1em
	-
		id: callout-margin
		title: 子标注块边距（任意单位）
		description: 为阴影留出空间
		type: variable-text
		default: 0px



	-
        id: float-callout-title
        title: 浮动标注块设置
        type: heading
        level: 1
		collapsed: true

	-
        id: float-callout-general-title
        title: 浮动标注块 -- 基本设置
        type: heading
        level: 2
		collapsed: false

	-
		id: float-callout-snw-display
		title: 在浮动/侧边标注块中隐藏SNW指示器
		type: variable-select
		default: none
		options:
			-
				label: 显示
				value: inline-block
			-
				label: 隐藏
				value: none

	-
        id: float-width-title
        title: 浮动标注块 -- 宽度设置
        type: heading
        level: 2
		collapsed: false
    -
        id: float-small-width
        title: 小型浮动标注块宽度（像素）
        type: variable-number-slider
        default: 300
        min: 200
        max: 450
        step: 50
		format: px
    -
        id: float-medium-width
        title: 中型浮动标注块宽度（像素）
        type: variable-number-slider
        default: 400
        min: 300
        max: 550
        step: 50
		format: px
    -
        id: float-large-width
        title: 大型浮动标注块宽度（像素）
        type: variable-number-slider
        default: 600
        min: 500
        max: 750
        step: 50
		format: px

	-
        id: float-gap-title
        title: 浮动标注块 -- 间距与边距
        type: heading
        level: 2
		collapsed: false
	-
	    id: float-callout-top-margin
		title: 调整左侧和右侧浮动标注块的上边距
		description: 可使用em或px单位
	    type: variable-text
	    default: 0em
	-
	    id: float-left-callout-margin-inline
		title: 调整左侧浮动标注块的左右边距
		description: 按此顺序输入 - "左侧 右侧"，可使用em或px单位
	    type: variable-text
	    default: 0px 12px
	-
	    id: float-right-callout-margin-inline
		title: 调整右侧浮动标注块的左右边距
		description: 按此顺序输入 - "左侧 右侧"，可使用em或px单位
	    type: variable-text
	    default: 12px 0px



    -
        id: mc-list-column-title
        title: 列表列
		description: 使用 `{.xxx-column-list-xxx}` 和 `#mcl/list-column`
        type: heading
        level: 1
		collapsed: true
	-
        id: list-column-width-title
        title: 列表列宽度控制
        type: heading
        level: 2
		collapsed: false
    -
        id: list-min-width
        title: 最小列宽度（像素）
        type: variable-number-slider
        default: 200
        min: 100
        max: 500
        step: 50
		format: px

	-
        id: list-column-deco-title
        title: 列表列装饰控制
        type: heading
        level: 2
		collapsed: false
	-
        id: col-rule-width
        title: 列表列之间分隔线宽度
		description: 单位为像素，设置为0可禁用分隔线
        type: variable-number-slider
        default: 1
        min: 0
        max: 4
        step: 1
		format: px
    -
        id: col-rule-color
        title: 列表列之间分隔线颜色
		type: variable-themed-color
		format: hsl
		opacity: true
		default-light: '#'
		default-dark: '#'


	-
        id: mc-list-grid-title
        title: 列表网格和列表卡片
		description: 使用 `#mcl/list-grid` 和 `#mcl/list-card`
        type: heading
        level: 1
		collapsed: true

	-
        id: list-grid-card-width-title
        title: 列表网格和列表卡片宽度控制
        type: heading
        level: 2
		collapsed: false
	-
        id: list-grid-min-width
        title: 普通列表网格/卡片的最小宽度
		description: 用于 `#mcl-list-grid` 或 `#mcl-list-card`，可使用em或px单位
		type: variable-text
		default: 250px
	-
        id: list-grid-wide-min-width
        title: 宽列表网格/卡片的最小宽度
		description: 用于 `#mcl/list-grid-wide` 或 `#mcl/list-card-wide`，可使用em或px单位
		type: variable-text
		default: 350px

	-
        id: list-card-deco-title
        title: 列表卡片装饰控制
        type: heading
        level: 2
		collapsed: false
	-
		id: mcl-card-header-border-width
		title: 列表卡片中首个标题的底边框
		description: 可使用em或px单位，设置为0可禁用边框
		type: variable-text
		default: 1px
	-
		id: mcl-card-bg-color
		title: 列表卡片背景颜色
		type: variable-themed-color
		format: hsl
		opacity: true
		default-light: '#'
		default-dark: '#'
	-
        id: mcl-card-gap
        title: 列表卡片之间的间距
		description: 可使用em或px单位
		type: variable-text
		default: 0.2em
	-
        id: mcl-card-border-width
        title: 列表卡片的边框宽度
		description: 可使用em或px单位，设置为0可禁用边框
		type: variable-text
		default: 1px
	-
		id: mcl-card-border-color
		title: 列表卡片的边框颜色
		type: variable-themed-color
		format: hsl
		opacity: true
		default-light: '#'
		default-dark: '#'

*/